<!-- WikiForm.vue -->
<template>
  <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
    <el-form-item label="标题" prop="title">
      <el-input
        v-model="form.title"
        maxlength="20"
        show-word-limit
        placeholder="请输入标题"
        @change="wikiTitleVAlidate"
      />
    </el-form-item>

    <el-form-item
      class="form-item100 article-cover"
      label="封面"
      prop="coverList"
    >
      <Upload
        v-model:file-list="form.coverList"
        :width="260"
        :height="150"
        :limit="1"
      />
    </el-form-item>

    <el-form-item label="摘要" prop="summary">
      <el-input
        v-model="form.summary"
        type="textarea"
        maxlength="60"
        show-word-limit
        :autosize="{ minRows: 4, maxRows: 6 }"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" :loading="loading" @click="handleSubmit"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import Upload from "@/components/Upload/upload.vue";
import { addWiki, editWiki, titleExist } from "@/api/blog/wiki";
import { message } from "@/utils/message";
import { ImgUpload } from "@/api/blog/site";
const props = defineProps({
  formData: { type: Object, default: () => ({}) }
});

const emit = defineEmits(["submit-success"]);
const canPublish = ref(true);
const formRef = ref();
const loading = ref(false);
const form = reactive({
  id: undefined,
  title: "",
  cover: "",
  summary: "",
  coverList: []
});
const coverV = (rule, value, cb) => {
  if (!value.length) {
    return cb(new Error("请先上传封面"));
  }
  cb();
};
const rules = {
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  summary: [{ required: true, message: "请输入摘要", trigger: "blur" }],
  coverList: [
    {
      require: true,
      message: "请上传文章封面",
      validator: coverV,
      trigger: ["change"]
    }
  ]
};
const originalTitle = ref("");

watch(
  () => props.formData,
  val => {
    Object.assign(form, {
      id: undefined,
      title: "",
      cover: "",
      summary: "",
      ...val
    });
    originalTitle.value = val?.title || ""; // 记录初始标题
  },
  { immediate: true }
);

async function wikiTitleVAlidate() {
  const { title } = form;
  // 如果标题未改动，跳过校验
  if (title === originalTitle.value) {
    canPublish.value = true;
    return;
  }
  const res = await titleExist({ title });
  if (!res) {
    canPublish.value = false;
    message("知识库标题已存在，换一个试试", { type: "warning" });
  } else {
    canPublish.value = true;
  }
}
// 图片上传
async function uploadCover() {
  if (!form.coverList[0].id) {
    const upLoadLoading = ElLoading.service({
      fullscreen: true,
      text: "图片上传中"
    });
    const file: File = form.coverList[0].raw;
    const res = await ImgUpload(file);
    if (res) {
      const { url } = res;
      form.cover = url;
    }
    upLoadLoading.close();
  }
}
async function handleSubmit() {
  if (canPublish.value) {
    await formRef.value.validate();
    loading.value = true;
    try {
      await uploadCover();
      if (form.id) {
        await editWiki(form.id, form); // 编辑
      } else {
        await addWiki(form); // 新增
      }
      ElMessage.success("操作成功");
      emit("submit-success"); // 通知父组件
    } catch (e) {
      console.error(e);
    } finally {
      loading.value = false;
    }
  } else {
    message("知识库标题已存在，换一个试试", { type: "warning" });
  }
}
</script>
<style lang="scss">
.el-textarea {
  /*滚动条整体部分*/
  .el-textarea__inner::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  /*滚动条的轨道*/
  .el-textarea__inner::-webkit-scrollbar-track {
    background-color: #32b2e8;
  }
  /*滚动条里面的小方块，能向上向下移动*/
  .el-textarea__inner::-webkit-scrollbar-thumb {
    background-color: rgba(222, 47, 47, 0.731);
    border-radius: 5px;
    border: 1px solid #32b2e8;
    box-shadow: inset 0 0 6px rgba(222, 47, 47, 0.731);
  }
  .el-textarea__inner::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }
  .el-textarea__inner::-webkit-scrollbar-thumb:active {
    background-color: rgba(222, 27, 170, 0.3);
  }
  /*边角，即两个滚动条的交汇处*/
  .el-textarea__inner::-webkit-scrollbar-corner {
    background-color: #e6e4e4;
  }
}
.article-cover {
  :deep(.el-form-item__content) {
    width: 260px !important;
    height: 150px !important;
  }

  :deep(.el-upload-list__item) {
    width: 260px !important;
    height: 150px !important;
    margin: 0 !important;
    border: none !important;
  }

  :deep(.el-upload--picture-card) {
    width: 260px !important;
    height: 150px !important;
  }

  :deep(.el-upload-list--picture-card) {
    width: 260px !important;
    height: 150px !important;
    margin: 0 !important;
    border: none !important;
  }
}
</style>
